<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<title></title>
		<meta name="description" content="overview & stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="static/css/bootstrap.min.css" rel="stylesheet" />
		<link href="static/css/bootstrap-responsive.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="static/css/font-awesome.min.css" />
		<!-- 下拉框 -->
		<link rel="stylesheet" href="static/css/chosen.css" />
		
		<link rel="stylesheet" href="static/css/ace.min.css" />
		<link rel="stylesheet" href="static/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="static/css/ace-skins.min.css" />
		
		<link rel="stylesheet" href="static/css/datepicker.css" /><!-- 日期框 -->
		<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="static/js/jquery.tips.js"></script>
		
<script type="text/javascript">
	//保存
	function save(){
		var apply_kind_num = "";
		for (var i = 0; i < arrGoods.length; i++) {
			if (arrGoods[i] != null) {
				if (i == 0) {
					apply_kind_num = arrGoods[i];
				} else {
					apply_kind_num = apply_kind_num + "," + arrGoods[i];
				}
			}
		}
		if (apply_kind_num == "") {
			$("#goodtype").tips({
				side : 3,
				msg : '请添加物品',
				bg : '#AE81FF',
				time : 2
			});
			$("#goodtype").focus();
			return false;
		} else {
			$("#apply_kind_num").val(apply_kind_num);
			var goods_id = "";
			for (var i = 0; i < arrIds.length; i++) {
				if (arrIds[i] != null) {
					if (i == 0) {
						goods_id = arrIds[i];
					} else {
						goods_id = goods_id + "," + arrIds[i];
					}
				}
			}
			$("#goods_id").val(goods_id);
		}
		
		
		$("#Form").submit();
		$("#zhongxin").hide();
		$("#zhongxin2").show();
	}
	//移除物品
	function removeGoods(index) {
		var str = $("#" + index).html();
		$("#" + index).remove();
		var jian = arrMoney[index] * 1;
		var nowMoney = $("#account").val() * 1;
		var zong = nowMoney - jian;
		$("#account").val(zong);
		arrMoney[index] = 0;
		arrGoods[index] = null;//清空该值
		arrIds[index] = null;//清空该值
	}
	var arrIds = new Array();//已经选择的物品类型id
	var arrMoney = new Array();//已经选择的数据金额
	var arrGoods = new Array();//已经选择的物品
	var index = 0;
	//添加物品
	function addGoods() {
		var num = $("#num").val();
		if (num == "") {
			$("#num").tips({
				side : 3,
				msg : '请输入数量',
				bg : '#AE81FF',
				time : 2
			});
			return false;
		}
		var z = /^[0-9]*$/;
		//是否是数字
		if (!z.test(num)) {
			$("#num").tips({
				side : 3,
				msg : '请输入数字',
				bg : '#AE81FF',
				time : 2
			});
			$("#num").focus();
			return false;
		}

		var htmlStr = $("#selectedGoods").html();
		var goodtypeId = $("#goodtype option:selected").val();
		var goodtypeText = $("#goodtype option:selected").text();
		var price = goodtypeText.substring(goodtypeText.lastIndexOf('价') + 1);
		var money = accMul(price, num).toFixed(2);
		var goodsStr = goodtypeText + "-数量" + num + "-共" + money + "元";
		var str = "<div id='"+index+"'><span>" + goodsStr
				+ "</span>&nbsp<a style='margin-top:5px' onclick='removeGoods("
				+ index + ")'>删除</a><br></div>";
		htmlStr = htmlStr + str;
		$("#selectedGoods").html(htmlStr);
		$("#num").val("");
		arrMoney[index] = money;
		arrGoods[index] = goodsStr;
		arrIds[index] = goodtypeId;
		var nowMoney = $("#account").val() * 1;
		var zong = nowMoney + money * 1;
		$("#account").val(zong);
		index++;
	}
	//乘法
	function accMul(arg1, arg2) {
		var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
		try {
			m += s1.split(".")[1].length
		} catch (e) {
		}
		try {
			m += s2.split(".")[1].length
		} catch (e) {
		}
		return Number(s1.replace(".", "")) * Number(s2.replace(".", ""))
				/ Math.pow(10, m)
	}
	
	
</script>
	</head>
<body>
	<form action="applygetmaterials/${msg }.do" name="Form" id="Form" method="post">
		<input type="hidden" name="apply_get_materials_id" id="apply_get_materials_id" value="${pd.apply_get_materials_id}"/>
		<input type="hidden" name="goods_id" id="goods_id" />
		<input type="hidden" name="apply_kind_num" id="apply_kind_num" />
		<div id="zhongxin">
		<table id="table_report" class="table table-striped table-bordered table-hover">
			<tr>
					<td style="width: 70px; text-align: right; padding-top: 13px;">选择物品:</td>
					<td><select class="chzn-select" name="goodtype" id="goodtype"
						data-placeholder="请选择" style="vertical-align: top; width: 200px;">
							<c:choose>
								<c:when test="${not empty types}">
									<c:forEach items="${types}" var="var" varStatus="vs">
										<option value="${var.good_type_id} ">${var.good_name}-单价${var.good_price}</option>
									</c:forEach>
								</c:when>
							</c:choose>
					</select></td>
				</tr>
				<tr>
					<td style="width: 70px; text-align: right; padding-top: 13px;">数量:</td>
					<td><input type="text" name="num" id="num" maxlength="32"
						placeholder="这里输入" title="" /> <a
						class="btn btn-mini btn-primary" onclick="addGoods();">确定</a></td>
				</tr>
				<tr>
					<td style="width: 70px; text-align: right; padding-top: 13px;">已选择:</td>
					<td id="selectedGoods"></td>
				</tr>
				<tr>
					<td style="width: 70px; text-align: right; padding-top: 13px;">总金额:</td>
					<td><input type="text" name="account"
						id="account" value="${pd.account}"
						maxlength="32" placeholder="这里输入" title="" readonly="readonly" /></td>
				</tr>
				<tr>
					<td style="width: 70px; text-align: right; padding-top: 13px;">备注:</td>
					<td><input type="text" name="remark"
						id="remark" value="${pd.remark}"
						maxlength="32" placeholder="这里输入" title=""/></td>
				</tr>
			<tr>
				<td style="text-align: center;" colspan="10">
					<a class="btn btn-mini btn-primary" onclick="save();">保存</a>
					<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
				</td>
			</tr>
		</table>
		</div>
		
		<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green">提交中...</h4></div>
		
	</form>
	
	
		<!-- 引入 -->
		<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
		<script src="static/js/bootstrap.min.js"></script>
		<script src="static/js/ace-elements.min.js"></script>
		<script src="static/js/ace.min.js"></script>
		<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
		<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
		<script type="text/javascript">
		$(top.hangge());
		$(function() {
			
			//单选框
			$(".chzn-select").chosen(); 
			$(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
			
			//日期框
			$('.date-picker').datepicker();
			
		});
		
		</script>
</body>
</html>